<template>
	<div class="tableTemplateClass">
		<vxe-table ref="vxeTableRef" :checkbox-config="{checkField:'isCheck'}" :loading="tableDataLoading" show-overflow border size="mini"
			:column-config="{ resizable: true }" :row-config="{ useKey: true, keyField: 'id', isCurrent: true, isHover: true }" :edit-config="{ trigger: 'click', mode: 'cell' }"
			:tree-config="{ transform: true, rowField: 'id', parentField: 'parentId', expandAll: true }" :data="tableData"
			:scroll-y="{ enabled: false }">
			<vxe-column type="checkbox" width="40" header-align="center" align="center"></vxe-column>
			<vxe-column field="field" title="参数名称" width="160" tree-node header-align="center">
				<template #default="{ row }">
					<template v-if="row.parentId != 0">
						{{ !!row.title ? row.title : row.field }}
					</template>
					<template v-else>
						<span>条件组</span>
					</template>
				</template>
			</vxe-column>
			<vxe-column field="comparator" title="比较符" width="150" header-align="center">
				<template #default="{ row }">
					<template v-if="row.parentId != 0">
						<el-select v-model="row.comparator" placeholder="请选择">
							<el-option v-for="(item, index) in comparatorOptions" :key="index" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</template>
				</template>
			</vxe-column>
			<vxe-column field="value" title="比较值" header-align="center">
				<template #default="{ row }">
					<template v-if="row.parentId != 0">
						<template v-if="row.controlType == 'select'">
							<!-- <el-select style="width: 100%;" v-model="row.value" placeholder="请选择">
								<el-option label="比较值1" value="&&" />
								<el-option label="比较值2" value="||" />
							</el-select> -->
						</template>
						<template v-else-if="row.controlType == 'date'">
							<el-date-picker :field="row.field" type="date" style="width: 100%;" v-model="row.value" placeholder="请选择"
								value-format="yyyy-MM-dd" />
						</template>
						<template v-else-if="row.controlType == 'datetime'">
							<el-date-picker :field="row.field" type="datetime" style="width: 100%;" v-model="row.value" placeholder="请选择"
								value-format="yyyy-MM-dd HH:mm:ss" />
						</template>
						<template v-else-if="row.controlType == 'daterange'">
							<el-date-picker :field="row.field" type="daterange" style="width: 100%;" v-model="row.value" placeholder="请选择"
								value-format="yyyy-MM-dd" />
						</template>
						<template v-else-if="row.controlType == 'datetimerange'">
							<el-date-picker :field="row.field" type="datetimerange" style="width: 100%;" v-model="row.value" placeholder="请选择"
								value-format="yyyy-MM-dd HH:mm:ss" />
						</template>
						<!-- 下拉框 -->
						<template v-else-if="row.controlType == 'reportSelect'">
							<reportSelect :field="row.field" v-model="row.value" style="width: 100%;" :row="row"></reportSelect>
						</template>
						<!-- 下拉框(表) -->
						<template v-else-if="row.controlType == 'reportSelectTable'">
							<reportSelectTable :field="row.field" fieldName="value" v-model="row.value" style="width: 100%;" :row="row"></reportSelectTable>
						</template>
						<!-- 下拉框(自定义单选) -->
						<template v-else-if="row.controlType == 'customSelect'">
							<reportCustomSelect :field="row.field" v-model="row.value" style="width: 100%;" :row="row"></reportCustomSelect>
						</template>
						<!-- 下拉框(自定义多选) -->
						<template v-else-if="row.controlType == 'customMulSelect'">
							<reportCustomMulSelect :field="row.field" v-model="row.value" style="width: 100%;" :row="row"></reportCustomMulSelect>
						</template>
						<!-- 下拉框(多选) -->
						<template v-else-if="row.controlType == 'reportMulSelect'">
							<reportMulSelect :field="row.field" v-model="row.value" style="width: 100%;" :row="row"></reportMulSelect>
						</template>
						<template v-else-if="row.controlType == 'number'">
							<el-input-number :field="row.field"  @keyup.enter.native="handleEnterEvent($event)" style="width: 100%;" v-model="row.value"></el-input-number>
						</template>
						<template v-else>
							<el-input :field="row.field"  @keyup.enter.native="handleEnterEvent($event)" style="width: 100%;" v-model="row.value" placeholder="请输入" />
						</template>
					</template>
				</template>
			</vxe-column>
			<vxe-column field="relationSign" title="关系" width="70" header-align="center">
				<template #default="{ row }">
					<!-- <template v-if="row.parentId != 0">
						
					</template> -->
					<el-select v-model="row.relationSign" placeholder="请选择">
							<el-option label="并" :value="0" />
							<el-option label="或" :value="1" />
							<el-option label="无" :value="-1" />
						</el-select>
				</template>
			</vxe-column>
		</vxe-table>
	</div>
</template>
<script setup>
import { ref, watch, nextTick, onMounted } from 'vue'
import reportSelect from '../innerComponents/reportSelect.vue'
import reportCustomSelect from '../innerComponents/reportCustomSelect.vue'
import reportCustomMulSelect from '../innerComponents/reportCustomMulSelect.vue'
import reportSelectTable from '../innerComponents/reportSelectTable.vue'
import reportMulSelect from '../innerComponents/reportMulSelect.vue'

const sqlServeSearchType = [
    {value:0,label:'等于',text:'Equal'},
    {value:1,label:'模糊查询',text:'Like'},
    {value:2,label:'大于',text:'GreaterThan'},
    {value:3,label:'大于等于',text:'GreaterThanOrEqual'},
    {value:4,label:'小于',text:'LessThan'},
    {value:5,label:'小于等于',text:'LessThanOrEqual'},
    {value:6,label:'In操作',text:'In'},
    {value:7,label:'NotIn操作',text:'NotIn'},
    {value:8,label:'左模糊',text:'LikeLeft'},
    {value:9,label:'右模糊',text:'LikeRight'},
    {value:10,label:'不等于',text:'NoEqual'},
    {value:11,label:'IsNullOrEmpty',text:'IsNullOrEmpty'},
    {value:12,label:'IsNot',text:'IsNot'},
    {value:13,label:'模糊查询取反',text:'NoLike'},
    {value:14,label:'EqualNull ',text:'EqualNull'},
    {value:15,label:'InLike',text:'InLike'},
	{value:16,label:'区间范围 ',text:'BetweenAnd'},
]

// Props
const props = defineProps({
	activeName: {
		type: String,
		default: "first"
	},
	tableDataLoading: {
		type: Boolean,
		default: false
	},
	tableOptions: {
		type: Array,
		default: () => []
	},
	conditionConfig: {
		type: Object,
		default() {
			return {
				hash: 698,
				flag: ''
			}
		}
	},
	isClearTreeData: {
		type: [Number, String],
		default: 0
	},
	isAdd: {
		type: Boolean,
		default: false
	}
})

// Emits
const emit = defineEmits(['handleEnterEvent'])

// Reactive data
const loadDataDone = ref(false)
const comparatorOptions = ref(sqlServeSearchType)
const tableData = ref([])

// Refs
const vxeTableRef = ref(null)

// Watchers
watch(() => props.isAdd, (val) => {
	// 新增方案
	if (val) {
		tableData.value = []
	}
})

// watch(() => props.isClearTreeData, (val, old) => {
// 	// 清空表格数据
// 	if (val && val !== old) {
// 		//debugger
// 		tableData.value = []
// 		// 重置加载状态
// 		loadDataDone.value = false
// 		setTimeout(() => {
// 			const $table = vxeTableRef.value
// 			if ($table) {
// 				$table.reloadData([])
// 			}
// 	   }, 300)
// 	}
// })

watch(() => props.conditionConfig, (val, old) => {
	nextTick(() => {
		//initData(val)
	})
}, { deep: true, immediate: true })

watch(() => props.tableOptions, (val, old) => {
	// debugger
	tableData.value = val
	// 条件组 默认全部展开
	if (!!val) {
		nextTick(() => {
			setAllTreeExpand()
		})
	}
}, { deep: true })
// Methods
// 处理回车事件回调
const handleEnterEvent = (e) => {
	emit("handleEnterEvent", e)
}

// 用于 tree-config，设置所有树节点的展开与否（如果是关闭所有树节点，可以使用 clearTreeExpand 快速清除）
const setAllTreeExpand = () => {
	//debugger
	if(!loadDataDone.value){
		loadDataDone.value = true
	} else {
		return
	}
	setTimeout(() => {
		const $table = vxeTableRef.value
		if ($table) {
			//$table.setAllCheckboxRow(true)
			$table.setAllTreeExpand(true)
		}
	}, 300)
}
</script>
<style lang="scss" scoped>
/* 样式设定 自动适应 表格高度 */
.tableTemplateClass {
	margin-right: 10px;
	/*  
	:deep(.vxe-table--body-wrapper)  {
		height: calc(100vh - 220px); 
	}*/
}

.tableTemplateSecondClass {
	margin-right: 10px;
   /* 
	:deep(.vxe-table--body-wrapper)  {
		height: calc(100vh - 320px); 
	} */  
}
</style>